<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="680"
    v-model="visible"
    :title="isUpdate ? '修改' : '新建'"
    @open="handleOpen"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      @submit.prevent=""
      style="margin-top: -20px"
    >
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="工程信息" name="first">
          <el-row :gutter="16">
            <el-col :sm="12" :xs="24">
              <el-form-item label="工程编码">
                <organization-select v-model="form.organizationId" />
              </el-form-item>
              <el-form-item label="联系电话" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
              <el-form-item label="委托单位" prop="nickname">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.nickname"
                  placeholder="请输入用户名"
                />
              </el-form-item>
              <el-form-item label="取样单位" prop="sex">
                <dict-data code="sex" v-model="form.sex" placeholder="请选择性别" />
              </el-form-item>
              <el-form-item label="见证单位" prop="roles">
                <role-select v-model="form.roles" />
              </el-form-item>
              <el-form-item label="委托日期" prop="email">
                <el-input
                  clearable
                  :maxlength="100"
                  v-model="form.email"
                  placeholder="请输入邮箱"
                />
              </el-form-item>
              <el-form-item label="监督单位" prop="phone">
                <el-input
                  clearable
                  :maxlength="11"
                  v-model="form.phone"
                  placeholder="请输入手机号"
                />
              </el-form-item>
              <el-form-item label="工区编号">
                <el-date-picker
                  v-model="form.birthday"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择出生日期"
                  class="ele-fluid"
                />
              </el-form-item>
              <el-form-item v-if="!isUpdate" label="领样方式" prop="password">
                <el-input
                  show-password
                  type="password"
                  :maxlength="20"
                  v-model="form.password"
                  placeholder="请输入登录密码"
                />
              </el-form-item>
              <el-form-item label="设计单位">
                <el-input
                  show-password
                  type="password"
                  :maxlength="20"
                  v-model="form.password"
                  placeholder="请输入登录密码"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="工程名称">
                <organization-select v-model="form.organizationId" />
              </el-form-item>
              <el-form-item label="工程地址" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
              <el-form-item label="委托人" prop="nickname">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.nickname"
                  placeholder="请输入用户名"
                />
              </el-form-item>
              <el-form-item label="取样人" prop="sex">
                <dict-data code="sex" v-model="form.sex" placeholder="请选择性别" />
              </el-form-item>
              <el-form-item label="见证人" prop="roles">
                <role-select v-model="form.roles" />
              </el-form-item>
              <el-form-item label="施工单位" prop="email">
                <el-input
                  clearable
                  :maxlength="100"
                  v-model="form.email"
                  placeholder="请输入邮箱"
                />
              </el-form-item>
              <el-form-item label="建设单位" prop="phone">
                <el-input
                  clearable
                  :maxlength="11"
                  v-model="form.phone"
                  placeholder="请输入手机号"
                />
              </el-form-item>
              <el-form-item label="见证送检编号">
                <el-date-picker
                  v-model="form.birthday"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择出生日期"
                  class="ele-fluid"
                />
              </el-form-item>
              <el-form-item v-if="!isUpdate" label="邮寄信息" prop="password">
                <el-input
                  show-password
                  type="password"
                  :maxlength="20"
                  v-model="form.password"
                  placeholder="请输入登录密码"
                />
              </el-form-item>
              <el-form-item label="电子样品编号">
                <el-input
                  show-password
                  type="password"
                  :maxlength="20"
                  v-model="form.password"
                  placeholder="请输入登录密码"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="费用情况" name="feiyong">
          <el-row>
            <el-col :sm="12" :xs="24">
              <el-form-item label="划费类型" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="单价" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="收费数量" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="附加费项目" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="附加费金额" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="委外项目" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="委外支付额" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="其他支出" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="实际金额" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="样品信息" name="second">
          <el-row>
            <el-col :sm="12" :xs="24">
              <el-form-item label="试验号" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="报告编号" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="收样人" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="实验种类" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="焊接方法" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="检验标记" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="检测类型" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="样品性质" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="样品状态" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="样品数量" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="代表数量" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="接头级别" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="直径(mm)" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="牌号" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="钢筋批号" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="工程部位" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="焊工姓名" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="焊工号" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="原试验号" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="生产厂家" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="取样地点" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="取样时间" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="生产日期" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="备注" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="检测参数" name="third">
          <el-row>
            <el-col :sm="12" :xs="24">
              <el-form-item label="检测依据" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="评定依据" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="请输入用户账号"
                  :disabled="isUpdate"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="24" :xs="24">
              <el-form-item label="检验项目" prop="username">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="form.username"
                  placeholder="抗拉强度、弯曲强度"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="24" :xs="24">
              <ele-data-table
                row-key="userId"
                :columns="columns2"
                :data="data2"
              ></ele-data-table>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save"> 保存 </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";
import { EleMessage, emailReg, phoneReg } from "ele-admin-plus/es";
import { useFormData } from "@/utils/use-form-data";
import RoleSelect from "./role-select.vue";
import OrganizationSelect from "@/views/system/organization/components/organization-select.vue";
import { addUser, updateUser, checkExistence } from "@/api/system/user";

const columns2 = ref([
  {
    type: "selection",
    columnKey: "selection",
    width: 50,
    align: "center",
    fixed: "left",
  },
  {
    label: "项目参数名称",
    prop: "name",
  },
  {
    label: "检测标准",
    prop: "biaozhun",
  },
  {
    label: "检测标准名称",
    prop: "bzname",
  },
]);

const data2 = ref([
  { name: "抗拉强度", biaozhun: "JGJ/T 27-2014", bzname: "钢筋焊接接头试验方法标准" },
  { name: "抗拉强度", biaozhun: "JGJ/T 27-2014", bzname: "钢筋焊接接头试验方法标准" },
]);

const activeName = ref("first");
const props = defineProps({
  /** 修改回显的数据 */
  data: Object,
  /** 添加时机构id */
  organizationId: Number,
});

const emit = defineEmits(["done"]);

/** 弹窗是否打开 */
const visible = defineModel({ type: Boolean });

/** 是否是修改 */
const isUpdate = ref(false);

/** 提交状态 */
const loading = ref(false);

/** 表单实例 */
const formRef = ref(null);

/** 表单数据 */
const [form, resetFields, assignFields] = useFormData({
  userId: void 0,
  username: "",
  nickname: "",
  sex: void 0,
  roles: [],
  email: "",
  phone: "",
  password: "",
  introduction: "",
  birthday: "",
  organizationId: void 0,
  status: 0,
});

/** 表单验证规则 */
const rules = reactive({
  username: [
    {
      required: true,
      message: "请输入用户账号",
      type: "string",
      trigger: "blur",
    },
    {
      min: 4,
      message: "账号长度最少为4位",
      type: "string",
      trigger: "blur",
    },
    {
      type: "string",
      trigger: "blur",
      validator: (_rule, value, callback) => {
        if (isUpdate.value) {
          callback();
          return;
        }
        checkExistence("username", value)
          .then(() => {
            callback(new Error("账号已经存在"));
          })
          .catch(() => {
            callback();
          });
      },
    },
  ],
  nickname: [
    {
      required: true,
      message: "请输入用户名",
      type: "string",
      trigger: "blur",
    },
  ],
  sex: [
    {
      required: true,
      message: "请选择性别",
      type: "string",
      trigger: "change",
    },
  ],
  roles: [
    {
      required: true,
      message: "请选择角色",
      type: "array",
      trigger: "change",
    },
  ],
  email: [
    {
      pattern: emailReg,
      message: "邮箱格式不正确",
      type: "string",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入登录密码",
      type: "string",
      trigger: "blur",
    },
    {
      type: "string",
      trigger: "blur",
      validator: (_rule, value, callback) => {
        if (isUpdate.value || /^[\S]{5,18}$/.test(value)) {
          return callback();
        }
        callback(new Error("密码必须为5-18位非空白字符"));
      },
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号",
      type: "string",
      trigger: "blur",
    },
    {
      pattern: phoneReg,
      message: "手机号格式不正确",
      type: "string",
      trigger: "blur",
    },
  ],
});

/** 关闭弹窗 */
const handleCancel = () => {
  visible.value = false;
};

/** 保存编辑 */
const save = () => {
  formRef.value?.validate?.((valid) => {
    if (!valid) {
      return;
    }
    loading.value = true;
    const saveOrUpdate = isUpdate.value ? updateUser : addUser;
    saveOrUpdate(form)
      .then((msg) => {
        loading.value = false;
        EleMessage.success(msg);
        handleCancel();
        emit("done");
      })
      .catch((e) => {
        loading.value = false;
        EleMessage.error(e.message);
      });
  });
};

/** 弹窗打开事件 */
const handleOpen = () => {
  if (props.data) {
    assignFields({ ...props.data, password: "" });
    isUpdate.value = true;
  } else {
    resetFields();
    form.organizationId = props.organizationId;
    isUpdate.value = false;
  }
  nextTick(() => {
    nextTick(() => {
      formRef.value?.clearValidate?.();
    });
  });
};
</script>
